/* eslint no-dupe-keys: 0, no-mixed-operators: 0 */
import React, { Component } from 'react';
import {Axios} from '../common/common';
import ReactDOM from 'react-dom';
// import { BrowserRouter,Link } from 'react-router-dom';
import { Carousel, WingBlank } from 'antd-mobile';

class Shuffling extends React.Component {
    state = {
        data: ['1', '2', '3'],
        imgHeight: 176,
        list:[]
    }
    componentDidMount() {
        // simulate img loading
        this.getMovieQuery()
        setTimeout(() => {
            this.setState({
                data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
            });
        }, 100);
    }
    getMovieQuery = () =>{
        let _this = this;
        Axios('get','/query/:'+_this.state.searchValue,{},function (res) {
            console.log('res=',res)
            let queryData = res.list;
            if(res.returnFlag=='200') {
                _this.setState({
                    list : queryData
                })
            }
            console.log(_this.state.list)
        },function (err) {
            console.log(err);
        })
    }
    render() {
        return (
            <WingBlank>
                <Carousel className="space-carousel"
                          frameOverflow="visible"
                          cellSpacing={10}
                          slideWidth={0.8}
                          autoplay
                          infinite
                          swipeSpeed="10"
                          afterChange={index => this.setState({ slideIndex: index })}
                >
                    {/*beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}*/}
                    {this.state.list.map((val, index) => (
                        <a
                            key={val}
                            href="/movieList"
                            style={{
                                display: 'block',
                                position: 'relative',
                                top: this.state.slideIndex === index ? -10 : 0,
                                height: this.state.imgHeight,
                                boxShadow: '2px 1px 1px rgba(0, 0, 0, 0.2)',
                            }}
                        >
                            <img
                                src={val.portrait}
                                alt=""
                                style={{ width: '100%', verticalAlign: 'top' }}
                                onLoad={() => {
                                    // fire window resize event to change height
                                    window.dispatchEvent(new Event('resize'));
                                    this.setState({ imgHeight: 'auto' });
                                }}
                            />
                        </a>
                    ))}
                </Carousel>
            </WingBlank>
        );
    }
}

export default Shuffling;
// ReactDOM.render(<Shuffling />, mountNode);